<template>
  <div class="container">
    <div>
      <!-- <Movies></Movies> -->
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
    <div class="tab-bar">
      <van-tabbar
        v-model="active"
        active-color="#cc4c43"
        inactive-color="#646566"
        route
      >
        <van-tabbar-item replace to="/zhuye/index">
          <span>首页</span>
          <template #icon="props">
            <img :src="props.active ? icon.active : icon.inactive" />
          </template>
        </van-tabbar-item>
        <van-tabbar-item replace to="/zhuye/gdprice">
          <span>好价</span>
          <template #icon="props">
            <img :src="props.active ? icon.active1 : icon.inactive1" />
          </template>
        </van-tabbar-item>
        <van-tabbar-item replace to="/zhuye/goodarticle">
          <span>好文</span>
          <template #icon="props">
            <img :src="props.active ? icon.active2 : icon.inactive2" />
          </template>
        </van-tabbar-item>
        <van-tabbar-item replace to="/zhuye/my">
          <span>我的</span>
          <template #icon="props">
            <img :src="props.active ? icon.active3 : icon.inactive3" />
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Tabbar, TabbarItem } from "vant";
// import daohang from "./daohang";
Vue.use(Tabbar);
Vue.use(TabbarItem);
import Communities from "./communities/Communities";
import ShoppingGuide from "./shoppingguide/ShoppingGuide";
export default {
  components: {
    Communities,
    ShoppingGuide,
  },
  data() {
    return {
      active: 0,
      icon: {
        active: require("../../assets/img/icon-home-act.jpg"),
        inactive: require("../../assets/img/icon-home.jpg"),
        active1: require("../../assets/img/icon-gdp-act.jpg"),
        inactive1: require("../../assets/img/icon-gdp.jpg"),
        active2: require("../../assets/img/icon-com-act.jpg"),
        inactive2: require("../../assets/img/icon-com.jpg"),
        active3: require("../../assets/img/icon-my-act.jpg"),
        inactive3: require("../../assets/img/icon-my.jpg"),
      },
    };
  },
  // components: {
  //   daohang,
  // },
};
</script>
<style lang='stylus' scoped>
.container
  position absolute
  left 0
  top 0
  width 100%
  overflow-y scroll
  h1
    text-align center
  height 100%
  display flex
  flex-direction column
  .main
    flex 1
    overflow hidden
  .tab-bar
    height 0.5rem
</style>
